<script setup lang='tsx' name='SongSheet'>
import { ref, reactive, watch, onActivated, onDeactivated, nextTick } from 'vue';
import { useRoute } from 'vue-router'
import { getSheetDetailApi } from '@/api'
import { PlusSharp, CollectionsBookmarkOutlined } from '@vicons/material';
import { Play32Filled, Collections20Regular, Share20Regular } from '@vicons/fluent'
import { Playlist, SheetDetail } from './types';
import { Download } from '@vicons/carbon'
import * as dayjs from 'dayjs'
// @ts-ignore
import logoImg from '@/assets/logo.png'
import SongList from './components/SongList.vue'
import Comment from './components/Comment.vue'
import Collectors from './components/Collectors.vue'
defineOptions({
    components: {
        SongList,
        Comment,
        Collectors
    }
})

const route = useRoute()
function useSheetDetail() {
    const loading = ref(true)
    const sheetDetail = ref<SheetDetail>({} as SheetDetail)
    const playlist = ref<Playlist>({} as Playlist)
    async function getSheetDetail() {
        try {
            loading.value = true
            const res = await getSheetDetailApi({ id: route.query.id as string })
            loading.value = false
            nextTick(() => {
                console.log(res, '歌单详情');
                sheetDetail.value = res
                playlist.value = res.playlist
            })
        } catch (error) {
            loading.value = false
        }
    }

    return { getSheetDetail, sheetDetail, loading, playlist }
}
const { getSheetDetail, sheetDetail, loading, playlist } = useSheetDetail()


const tabList = ref([
    {
        name: 'songs',
        tab: '歌曲列表',
        component: 'SongList'
    },
    {
        name: 'comment',
        tab: '评论',
        component: 'Comment'
    },
    {
        name: 'collectors',
        tab: '收藏者',
        component: 'Collectors'
    },
])
onActivated(() => {
    getSheetDetail()
})
onDeactivated(() => {
    playlist.value.tracks = []
})

</script>

<template>
    <div class='song-sheet'>
        <div v-show="loading" class="loading-mark">
            <n-spin stroke="#ed5353">
                <template #description>
                    加载中...
                </template>
            </n-spin>
        </div>
        <template v-if="!loading">
            <div class='song-sheet__cover'>
                <div class='song-sheet__cover__img__wrapper'>
                    <img class="song-sheet__cover__img" :src="playlist.coverImgUrl">
                    <div class="logo">
                        <img :src="logoImg">
                    </div>
                </div>
                <div class='song-sheet__info'>
                    <div class='song-sheet__info__title'>{{ playlist.name }}</div>
                    <div class='song-sheet__info__author__info'>
                        <div class="song-sheet__info__author">
                            <img :src="playlist?.creator?.avatarUrl">
                            <span>{{ playlist?.creator?.nickname }}</span>
                        </div>
                        <span class="createTime">{{ dayjs(playlist?.createTime).format('YYYY-MM-DD')
                        }}创建</span>
                    </div>
                    <div class='song-sheet__info__function'>
                        <n-button-group>
                            <n-button round color="#ec4141">
                                <template #icon>
                                    <n-icon :component="Play32Filled" color="#fff"></n-icon>
                                </template>
                                播放全部
                            </n-button>
                            <n-button round color="#ec4141">
                                <template #icon>
                                    <n-icon :component="PlusSharp" color="#fff"></n-icon>
                                </template>
                            </n-button>
                        </n-button-group>
                        <n-button ghost round color="#ec4141">
                            <template #icon>
                                <!-- <n-icon :component="Collections20Regular" color="#ec4141"></n-icon> -->
                                <n-icon :component="CollectionsBookmarkOutlined" color="#ec4141"></n-icon>
                            </template>
                            收藏
                        </n-button>
                        <n-button ghost round color="#ec4141">
                            <template #icon>
                                <n-icon :component="Share20Regular" color="#ec4141"></n-icon>
                            </template>
                            分享
                        </n-button>
                        <n-button ghost round color="#ec4141">
                            <template #icon>
                                <n-icon :component="Download" color="#ec4141"></n-icon>
                            </template>
                            下载全部
                        </n-button>
                    </div>
                    <div class='song-sheet__info__statistics'>
                        <span class="song-count">歌曲：{{ playlist?.trackCount }}</span>
                        <span class="song-count">播放：{{ playlist?.playCount }}</span>
                    </div>
                    <div class='song-sheet__info__desc'>简介：{{ playlist?.description }}</div>

                </div>
            </div>
            <n-tabs animated size="large">
                <n-tab-pane display-directive="show" v-for="tab in tabList" :key="tab.name" :name="tab.name" :tab="tab.tab">
                    <component :is="tab.component" :songlist="playlist?.tracks || []"></component>
                </n-tab-pane>
            </n-tabs>
        </template>
    </div>
</template>

<style lang='scss' scoped>
.loading-mark {
    width: 100%;
    height: 700px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.song-sheet {

    .song-sheet__cover {
        display: flex;
        gap: 26px;
        margin-bottom: 40px;

        .song-sheet__cover__img__wrapper {
            height: 200px;
            height: 200px;
            border-radius: 10px;
            border: 1px solid #999;
            position: relative;
            flex-shrink: 0;

            .song-sheet__cover__img {
                width: 100%;
                height: 100%;
                border-radius: 10px;
            }

            .logo {
                width: 14px;
                height: 14px;
                position: absolute;
                left: 10px;
                top: 10px;
                filter: grayscale(100%);

                .logoImg {
                    width: 100%;
                    height: 100%;

                }
            }
        }


        .song-sheet__info {
            display: flex;
            flex-direction: column;
            gap: 8px;

            .song-sheet__info__title {
                font-size: 30px;
                font-weight: 700;
            }

            .song-sheet__info__author__info {
                display: flex;
                align-items: center;
                gap: 16px;

                .song-sheet__info__author {
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    gap: 4px;
                    font-size: 14px;

                    img {
                        width: 22px;
                        height: 22px;
                        border-radius: 50%;
                        vertical-align: middle;
                    }
                }

                .createTime {
                    color: #999;
                    font-size: 12px;
                }
            }

            .song-sheet__info__function {
                display: flex;
                gap: 14px;
                margin: 4px 0;

                .n-button {
                    padding-left: 16px;
                    padding-right: 16px;
                }
            }

            .song-sheet__info__statistics {
                font-size: 12px;
                color: #676767;

                span {
                    margin-right: 10px
                }
            }

            .song-sheet__info__desc {
                @include text-ellipsis();
                font-size: 12px;
                color: #676767;
                width: 800px;
            }
        }
    }
}
</style>

<style lang='scss' scoped>
:deep(.n-tabs-bar) {
    background-color: #ec4141;
}

:deep(.n-tabs-tab.n-tabs-tab--active) {
    color: #ec4141 !important;
    font-weight: 700 !important;
}


:deep(.n-tabs-tab:hover) {
    color: #ec4141 !important;
}

:deep(.n-tabs-tab:hover .n-tabs-tab__label) {
    color: #ec4141;
}
</style>